<template>
	<view class="">
	
		<view class="body" >
			<view class="top-container">
				<uni-list :border="false" >
					<!-- <uni-list-item :border="false" title="执行者" :rightText="userInfo.name" /> -->
					<uni-list-item :border="false" title="单据编号"  :rightText="header.billNo" />
					<uni-list-item :border="false" title="物料名称"  :rightText="header.materialName" />
					<uni-list-item :border="false" title="件号"  :rightText="header.specification" />
					<uni-list-item :border="false" title="数量"  	:rightText="String(header.qty)" />
					<uni-list-item :border="false" title="工序说明"  :rightText="header.describe1" />
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat 
							  :date="header.date" 
							  format="yyyy年MM月dd日" 
							  style="font-size: 22px; color: #000000;"
							></uni-dateformat>
						</template>
					</uni-list-item>	
				</uni-list>
			</view>
			
			<template v-if="detail && detail.length > 0" >
		
				<uni-swipe-action-item class="" v-for="(item,index) in detail" :left-options="options" @click="handleDelete(item)" :key = "index">
					<view class="panel">
						<view class="panel_content">
							<view class="panel_content_row">
								<!-- <view class="panel_content_row_item">
									<view class="panel_content_row_item_title">托盘编号：</view>
									<view class="panel_content_row_item_value">{{ item.trayno }}</view>
								</view> -->
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料名称：</view>
									<view class="panel_content_row_item_value">{{ item.fmaterialname }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料编码：</view>
									<view class="panel_content_row_item_value">{{ item.fmaterialnumber }}</view>
								</view>
							</view>
						</view>
								<view class="panel_content">
									<view class="panel_content_row">
								<!-- 暂时没有材质，用单位代替 -->
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">单位：</view>
									<view class="panel_content_row_item_value">{{ item.funitname }}</view>
								</view>
							</view>
						</view>

						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">退料数量：</view>
									<view class="panel_content_row_item_value">{{ item.factqty }}</view>
								</view>
								
							</view>
						</view>
					</view>
				</uni-swipe-action-item>	
			
			</template>
		<uni-empty-info v-else label="暂无退料信息"></uni-empty-info>
			
		</view>	
		<!--  底部按钮  -->
		<view class="footerPanel">
			<view class="footerPanel_body">
			<button style="background-color: #11d5e6;" @click="handleChoose" class="footerBtn reset"><i class="iconfont icon-duihao btn_icon"></i>选择
			</button>
			<button @click="saveReturnBill" class="footerBtn save"><i
					class="iconfont icon-shengchenggongdan btn_icon"></i>创建退料订单
			</button>
				
			</view>
		</view>
		
		<!-- 扫描托盘 -->
		<tray-popup ref="trayPopupRef" @success="trayScanningScuess"></tray-popup>
		
		<!-- 级联选择 -->
		<CascadePicker class="picker-view large-font-picker" style="font-size: 20px;" ref="pickerView" popupTitle="选择物料信息" :map="{text:'materialName',value:'id'}"
			:refresherEnabled="false" @change="onchange" :loading="pickerLoading" :showSearch="false"
			:multi-select="true" showNameOnly showMaterialDetail checkCount>
		</CascadePicker>
</view>
</template>

<script>

	import {getPrdReturnList,
	getPrdReturnTemp,
	addPrdReturnDetail,
	deleteReturnDetailTemp,
	saveReturnBill
	} from '@/utils/api.js'
	import GetTray from "../pop/get_tray.vue"
	import trayPopup from '../../components/popup/trayPopup.vue'
	import CascadePicker from '../../components/cascade-picker/cascade-picker-view.vue'
	import CascadePickerJs from '../../components/cascade-picker/cascade-picker.js'
	import uniEmptyInfo from "../../vBase/components/uni-empty-info/uni-empty-info.vue"
	export default {
		components: {
			GetTray,
			trayPopup,
			CascadePicker,
			uniEmptyInfo
		},
		data(){
			return{
				billNo: '',
				loading: true,
				header:{},
				detail:[],
				pickerLoading: true,
				trayData:{},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF4E74'
					}
				}],
			}
	},
	methods:{
		//生成退料单
		saveReturnBill(){
			let _this = this
			if (this.detail.length == 0 || this.detail == null){
				uni.showToast({
					title:'当前没有数据，请先选择退料信息',
					icon:'none'
				})
					return;
			}
			uni.showModal({
				title:'提示',
				content:'确认保存退料',
				success(res) {
					if (res.confirm){
						saveReturnBill({planData : _this.header,detail : _this.detail}).then(result => {
						if (result.data.data){
							uni.showToast({
								title:'退料单创建成功',
								icon:'none'
							})
						}
						_this.initData()
						
						
						})
					
					}
				}
			})
		},
		/**
		 * 加到退料表
		 * @param {Object} e
		 */
		 async onchange(e) {
			try {
				this.boxList = JSON.parse(JSON.stringify(e))
				this.boxList.forEach(option => {
					option.count = Number(option.count ?? 0)
				})
				let res = await addPrdReturnDetail({
					boxList: e
				})
				if (!res.data) return
				uni.showToast({
					title: "添加成功",
					icon: "none"
				})
				this.initData();
			} finally {}
		},
		/**
		 * 选择
		 */
		async handleChoose() {
			let _this = this;
			try {
				const res = await getPrdReturnList({
					moBillNo: this.header.moBillNo
				})
				if (!res.data.status == 200) return
				this.dataTree = res.data.data.data ?? []
				let tree = JSON.parse(JSON.stringify(this.dataTree))
				tree.map(v => {
					return Object.assign(v, {
						maxCount: v.count 
					})
				})
				this.$refs.pickerView.updateData({
					treeData: tree,
					selected: [],
					selectedIndex: 0
				})
			} finally {
				this.pickerLoading = false
				this.$forceUpdate()
			}
		},
		/**
		 * 删除物料
		 * @param {Object} e
		 */
		handleDelete(item) {
			const self = this
			uni.showModal({
				title: '提示',
				content: '是否删除物料？',
				success(res) {
					if (res.confirm){
						deleteReturnDetailTemp({moBillNo : self.header.moBillNo,pickDetail : item}).then(res => {
							if (res.data.data){
								uni.showToast({
									title:'删除成功',
									icon:'none'
								})
							}
							self.initData()
							
						})
					}
					
				}
			})
		},
		//扫码获取领料信息
		pickScan(){
			this.$refs.trayPopupRef.open()
		},
		// 获取详情数据
		initData(){
			getPrdReturnTemp({billNo :this.billNo }).then(res => {
				if (res.statusCode == 200){
					this.header = res.data.data.data
					this.detail = res.data.data.dataList
				} 
			})

		}
	},
	watch: {
		userInfo() {
			
			}
		},
		mounted() {
			this.initData()

		},
	onLoad(e){
		this.billNo = e.billNo
		
	}
}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";
/* 调整列表项左右文字大小 */
::v-deep .uni-list-item__content-title {
    font-size: 22px !important;  /* 左侧标题字体大小 */
	padding-left: 5px;
}
::v-deep .uni-list-item__extra-text {
    font-size: 22px !important;  /* 右侧内容字体大小 */
	padding-right: 5px;
	 color: #000000;
}
/* 调整行间距 */
::v-deep .uni-list-item__container {
    padding: 3px 0 !important;   /* 减小上下内边距 */
    min-height: 10px !important; /* 减小最小高度 */
}

.panel {
  background: #fbffe2;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
 
/* 调整标题样式 */
.panel_content_row_item_title {
    font-size: 17px !important;  /* 调大字体 */
    color: #000000 !important;   /* 纯黑字体 */
    flex-shrink: 0;             /* 防止压缩 */
}
/* 调整标题样式 */
.panel_content_row_item_value {
  flex: 1;
  font-size: 17px !important; /* 数值特别放大 */
  color: #333 !important;
}
/* 底部按钮 - 修改布局 */
	.footerPanel {
	  height: 60px;
	  .footerPanel_body {
	    display: flex;
	    justify-content: space-between; /* 左右分布按钮 */
	    width: 100%;
	    padding: 0 10px;
	    box-sizing: border-box;
	    
	    .footerBtn {
	      height: 50px;
	      min-width: 115px;
	      display: flex;
	      line-height: 1;
	      font-size: 20px; /* 适当增大字体 */
	      border-radius: 8px;
	      align-items: center;
	      justify-content: center;
	      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	      color: #fff;
	      border: none;
	      // margin: 0 10px;
	    }
	  }
	}

</style>